<template>
    <div class="container">
		<el-form>
			
		
        <el-row>
            <el-col :span="5">
                <div style="width:200px;height:200px; border:1px solid #ccc;">
                    <img  :src="api + ruleForm.plantImg" alt="" style="width:100%;height:100%;">
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <span style="font-size:18px; font-weight:600;">{{ruleForm.jyName}}</span>
                    <span class="mar-l">种植批次号:{{ruleForm.plantBatch}}</span>
                </div>
                <div style="margin-top:30px;font-size:14px;">
                    <span>种植面积：{{ruleForm.reapArea}}亩</span>
                    <span class="mar-l">种植地块：{{ruleForm.soilName}}</span>
                    <span class="mar-l">种植时间：{{ruleForm.plantTime}}</span>
                </div>
                <div class="con">
                    <div style="margin-top:10px;"><span>生长:{{this.iday}}天</span><span style="position:absolute;left:200px;">种植人：{{ruleForm.reapUserName}}</span></div>
                    <!-- <div style="margin-top:20px;"><span>种苗数量：{{number}}{{ruleForm.units}}</span></div> -->
                </div>
            </el-col>
       </el-row>
       <el-row style="margin-top:30px;">
		   <el-col :span="10">
			   <el-form-item label="采收方式:">
				   {{ruleForm.reapWay}}
			   </el-form-item>
			   <el-form-item label="采收批号:">
			   		{{ruleForm.batch}}
			   </el-form-item>
			   <el-form-item label="开始时间:">
				   {{ruleForm.beginTime}}
			   </el-form-item>
		   </el-col>
		   <el-col :span="12">
			   <el-form-item label="采收面积:">
				   {{ruleForm.reapArea}}
			   </el-form-item>
			   <el-form-item label="负责人:">
					{{ruleForm.reapUserName}}
			   </el-form-item>
			   <el-form-item label="结束时间:">
				   {{ruleForm.endTime}}
			   </el-form-item>
		   </el-col>
           <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="第一年" name="第一年" style="background:#f5f5f5;padding:30px;"> -->
                    
                    <div class="addtend" v-for="(item,index) in ruleForm.list" :key="index" style="background:#f5f5f5;padding:5px; border:1px solid #33322f;">
                       <!-- {{item.name}} -->
					   <el-form-item label="产出物名称">
						   {{item.reapName}}
					   </el-form-item>
					   <el-form-item label="采收部位">
						   {{item.reapPart}} <span style="margin-left:30px;" ><el-button type="primary" style="float: right;">{{item.reapNumber}}{{item.units}}</el-button></span>
					   </el-form-item>
					   <el-form-item>
							  <img  :src="api + item.reapImg" alt="" style="width:200px;height:100px;">
					   </el-form-item>
                    </div>
                    
                <!-- </el-tab-pane> -->
               <!-- <el-tab-pane label="第二年" name="第二年" style="background:#f5f5f5;"></el-tab-pane>
                
            </el-tabs> -->
        </el-row>
		<el-form-item class="footerFixed" label-width="0px">
		   
		    <el-button @click="backPage" >返回</el-button>
		</el-form-item>
		</el-form>
    </div>
</template>

<script>
    import {reap_findById} from "@/request/api"
    export default {
        data(){
            return{
                iday:'',
                api:this.$store.state.plantImg,
                id:'',
                activeName:'第一年',
                
                ruleForm:'',
				number:0
            }
        },
        mounted(){
            this.id = this.$route.query.id
            this.init()
            
            // console.log(this.id)
            
        },
        methods:{
			backPage(){
				this.$router.go(-1)
			},
            init(){
                reap_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    var date2 = this.ruleForm.beginTime.replace(/\//g,"-")
					var date1 = this.ruleForm.endTime.replace(/\//g,"-")
                    var date1 = Date.parse(date1)
                    var date2 = Date.parse(date2)
                   
                    var day =  date1 - date2
                    var day = Math.abs(day)
                    this.iday = Math.floor(day/(24*3600*1000))
					for(var i=0;i<res.data.list.length;i++){
						this.number = this.number + Number(this.ruleForm.list[i].reapNumber)
					}
					// console.log(this.number)
                })
            },
            handleClick(){

            },
            goadded(){
                this.$router.push({
                    path:'/plant/tending/addtending'
                })
            }
        }
    }
</script>

<style scoped>
    .mar-l{
        margin-left:30px;    
    }
    .con{
        width:400px;
        /* height:100px; */
        background:#E8F1FF;
        border-radius:10px;
        margin-top:25px;
        padding:15px;
        font-size:14px;
        position:relative;
    }
    .addtend{
        display:inline-block;
        width: 200px;
        margin-left:20px;
        /* margin:20px; */
        height:200px;
        /* line-height:200px;
        text-align: center; */
        background:#fff;
    }
    
</style>
